<%--
  Created by IntelliJ IDEA.
  User: luhan
  Date: 5/30/2019
  Time: 6:24 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>View Users</title>
    <jsp:include page="includes/header.jsp"/>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <jsp:include page="includes/mainHeader.jsp"/>

    <jsp:include page="includes/mainSideBar.jsp"/>

    <div class="content-wrapper" style="min-height: 869px;">
        <!-- Main content -->
        <section class="content">
            <div class="row">

                <c:if test="${message != null}">
                    <div class="alert alert-info alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h4><i class="icon fa fa-info"></i> Note</h4>
                            ${message}
                    </div>
                </c:if>

                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">User List</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

                                <div class="row">
                                    <div class="col-sm-offset-4 col-sm-4">
                                        <button type="button" class="btn btn-block btn-success btn-lg"
                                                onclick="window.location.href='/user_form.jsp'">Register
                                        </button>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6"></div>
                                    <div class="col-sm-6"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="example2" class="table table-bordered table-hover dataTable"
                                               role="grid" aria-describedby="example2_info">
                                            <thead>
                                            <tr role="row">
                                                <th class="sorting_asc" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending">
                                                    id
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1" aria-label="Browser: activate to sort column ascending">
                                                    username
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending">
                                                    email
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="Engine version: activate to sort column ascending">
                                                    phone
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="CSS grade: activate to sort column ascending">date
                                                    created
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="CSS grade: activate to sort column ascending">
                                                    manage user
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${userList}" var="user">
                                                <tr role="row" class="odd">
                                                    <td class="sorting_1">${user.id}</td>
                                                    <td>${user.username}</td>
                                                    <td>${user.email}</td>
                                                    <td>${user.phone}</td>
                                                    <td><fmt:formatDate value="${user.created}"
                                                                        pattern="yyyy-mm-dd HH:mm:ss"/></td>
                                                    <td>
                                                        <div class="row text-center">
                                                            <div class="col-xs-4">
                                                                <button type="submit"
                                                                        name="displayId"
                                                                        value="on"
                                                                        onclick="displayById(${user.id})"
                                                                        class="btn btn-block btn-primary btn-flat">
                                                                    details
                                                                </button>
                                                            </div>
                                                            <div class="col-xs-4">
                                                                    <a type="submit"
                                                                       href="/getUserById?id=${user.id}"
                                                                            class="btn btn-block btn-success btn-flat">
                                                                        modify user
                                                                    </a>
                                                            </div>
                                                            <div class="col-xs-4">
                                                                <a type="button"
                                                                        href="/deleteUser?id=${user.id}"
                                                                        class="btn btn-block btn-info btn-flat">
                                                                    delete user
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </c:forEach>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>

    <jsp:include page="includes/footer.jsp"/>

    <div class="modal modal-info fade" id="modal-info">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Info Modal</h4>
                </div>
                <div class="modal-body">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="infoName" class="col-sm-2 control-label">用户名</label>

                            <div class="col-sm-10">
                                <input type="text" name="infoName" class="form-control" id="infoName" placeholder="用户名" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="infoPwd" class="col-sm-2 control-label">密码</label>

                            <div class="col-sm-10">
                                <input type="password" name="passWord" class="form-control" id="infoPwd" placeholder="密码" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="infoEmail" class="col-sm-2 control-label">邮箱</label>

                            <div class="col-sm-10">
                                <input type="email" name="email" class="form-control" id="infoEmail" placeholder="邮箱" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="infoPhone" class="col-sm-2 control-label">电话号码</label>

                            <div class="col-sm-10">
                                <input type="text" name="phone" class="form-control" id="infoPhone" placeholder="电话号码" readonly>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-right" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

<script type="text/javascript">
    function displayById(param){
        debugger
        $("#modal-info").modal("show");
        $.ajax({
            type: "POST",
            url: "/displayUserById",
            data: {id: param},
            datatype: "json",
            success: function (data) {
                $("#infoName").val(data.username);
                $("#infoPassword").val(data.password);
                $("#infoEmail").val(data.email);
                $("#infoPhone").val(data.phone);
            }
        })
    }
</script>

<jsp:include page="includes/importFiles.jsp"/>
</body>
</html>
